<template>
  <view class="publish-topic-page">
    <!-- 顶部导航栏 -->
    <view class="navbar">
      <view class="cancel-btn" @click="handleCancel">
        <text>取消</text>
      </view>
      <view class="nav-title">发布话题</view>
      <view class="publish-btn" @click="submitTopic" :disabled="!canPublish">
        <text>发布</text>
      </view>
    </view>

    <!-- 发布表单 -->
    <view class="publish-form">
      <!-- 话题分类 -->
      <view class="form-item category-selector">
        <text class="item-label">话题分类</text>
        <view class="category-content" @click="showCategoryPicker = true">
          <text class="selected-category">{{ selectedCategory || '请选择分类' }}</text>
          <uni-icons type="arrow-right" size="18" color="#86909C"></uni-icons>
        </view>
      </view>

      <!-- 话题标题 -->
      <view class="form-item">
        <textarea 
          class="topic-input title-input" 
          placeholder="添加一个吸引人的标题（可选）"
          v-model="topicTitle"
          maxlength="50"
          @input="checkPublishable"
        ></textarea>
        <text class="input-counter">{{ topicTitle.length }}/50</text>
      </view>

      <!-- 话题内容 -->
      <view class="form-item">
        <textarea 
          class="topic-input content-input" 
          placeholder="分享你的想法、经验或问题..."
          v-model="topicContent"
          maxlength="2000"
          @input="checkPublishable"
        ></textarea>
        <text class="input-counter">{{ topicContent.length }}/2000</text>
      </view>

      <!-- 图片上传 -->
      <view class="form-item image-uploader">
        <text class="item-label">添加图片（可选）</text>
        <view class="upload-container">
          <!-- 已上传图片 -->
          <view class="image-preview" v-for="(img, index) in uploadedImages" :key="index">
            <image :src="img" alt="已上传图片" class="preview-image"></image>
            <view class="delete-image" @click.stop="deleteImage(index)">
              <uni-icons type="close" size="18" color="white"></uni-icons>
            </view>
          </view>
          
          <!-- 上传按钮 -->
          <view class="upload-btn" @click="chooseImage" v-if="uploadedImages.length < maxImages">
            <uni-icons type="camera" size="24" color="#86909C"></uni-icons>
          </view>
          
          <!-- 图片数量提示 -->
          <text class="image-count" v-if="uploadedImages.length > 0">
            {{ uploadedImages.length }}/{{ maxImages }}
          </text>
        </view>
      </view>

      <!-- 话题标签 -->
      <view class="form-item tags-container">
        <text class="item-label">添加标签（可选）</text>
        <view class="tags-content">
          <!-- 已选标签 -->
          <view class="tag-item" v-for="(tag, index) in selectedTags" :key="index">
            <text>{{ tag }}</text>
            <uni-icons type="close" size="14" class="tag-close" @click.stop="removeTag(index)"></uni-icons>
          </view>
          
          <!-- 添加标签输入框 -->
          <input 
            class="add-tag-input" 
            placeholder="添加标签，按回车确认"
            v-model="newTag"
            @confirm="addTag"
            v-if="selectedTags.length < maxTags"
          >
        </view>
        <text class="tags-hint">最多添加5个标签，使用#话题 格式可被更多人看到</text>
      </view>
    </view>

    <!-- 分类选择器弹窗 -->
    <view class="category-modal" v-if="showCategoryPicker">
      <view class="modal-mask" @click="showCategoryPicker = false"></view>
      <view class="modal-content">
        <view class="modal-header">
          <text class="modal-title">选择话题分类</text>
          <uni-icons type="close" size="22" class="modal-close" @click="showCategoryPicker = false"></uni-icons>
        </view>
        
        <view class="category-list">
          <view 
            class="category-option" 
            v-for="(category, index) in categories" 
            :key="index"
            @click="selectCategory(category)"
          >
            <text>{{ category.name }}</text>
            <uni-icons 
              type="checkmark" 
              size="20" 
              class="option-check" 
              v-if="selectedCategory === category.name"
            ></uni-icons>
          </view>
        </view>
      </view>
    </view>

    <!-- 发布成功提示 -->
    <view class="success-toast" v-if="showSuccessToast">
      <uni-icons type="success" size="36" color="#00B42A"></uni-icons>
      <text class="toast-text">发布成功</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 话题数据
      topicTitle: '',
      topicContent: '',
      selectedCategory: '',
      selectedTags: [],
      newTag: '',
      uploadedImages: [],
      
      // 配置限制
      maxImages: 9,
      maxTags: 5,
      
      // 话题分类
      categories: [
        { name: '技术讨论', type: 'technology' },
        { name: '设备评测', type: 'equipment' },
        { name: '飞行技巧', type: 'skills' },
        { name: '作品展示', type: 'works' },
        { name: '行业资讯', type: 'news' },
        { name: '活动组织', type: 'activities' }
      ],
      
      // 状态控制
      showCategoryPicker: false,
      showSuccessToast: false,
      canPublish: false
    };
  },
  
  methods: {
    // 检查是否可以发布
    checkPublishable() {
      // 内容或标题至少有一个有内容，且必须选择分类
      this.canPublish = (this.topicTitle.trim().length > 0 || this.topicContent.trim().length > 0) && 
                       this.selectedCategory !== '';
    },
    
    // 选择分类
    selectCategory(category) {
      this.selectedCategory = category.name;
      this.showCategoryPicker = false;
      this.checkPublishable();
    },
    
    // 选择图片
    chooseImage() {
      const remainCount = this.maxImages - this.uploadedImages.length;
      
      uni.chooseImage({
        count: remainCount,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          // 临时路径数组
          const tempFilePaths = res.tempFilePaths;
          this.uploadedImages = [...this.uploadedImages, ...tempFilePaths];
        }
      });
    },
    
    // 删除图片
    deleteImage(index) {
      uni.showModal({
        title: '提示',
        content: '确定要删除这张图片吗？',
        cancelText: '取消',
        confirmText: '删除',
        success: (res) => {
          if (res.confirm) {
            this.uploadedImages.splice(index, 1);
          }
        }
      });
    },
    
    // 添加标签
    addTag() {
      if (!this.newTag.trim()) return;
      
      // 移除可能存在的#符号
      let tag = this.newTag.trim().replace(/#/g, '');
      
      // 检查是否已添加
      if (this.selectedTags.includes(tag)) {
        uni.showToast({
          title: '该标签已添加',
          icon: 'none',
          duration: 1500
        });
        this.newTag = '';
        return;
      }
      
      // 检查长度
      if (tag.length > 10) {
        uni.showToast({
          title: '标签长度不能超过10个字符',
          icon: 'none',
          duration: 1500
        });
        return;
      }
      
      this.selectedTags.push(tag);
      this.newTag = '';
    },
    
    // 移除标签
    removeTag(index) {
      this.selectedTags.splice(index, 1);
    },
    
    // 提交话题
    submitTopic() {
      if (!this.canPublish) return;
      
      // 显示加载中
      uni.showLoading({
        title: '发布中...',
        mask: true
      });
      
      // 模拟API请求
      setTimeout(() => {
        uni.hideLoading();
        
        // 显示发布成功提示
        this.showSuccessToast = true;
        
        // 2秒后跳转到话题列表
        setTimeout(() => {
          this.showSuccessToast = false;
          uni.navigateBack();
        }, 1500);
      }, 2000);
    },
    
    // 取消发布
    handleCancel() {
      if (this.topicTitle || this.topicContent || this.uploadedImages.length > 0 || this.selectedTags.length > 0) {
        // 有内容时提示确认
        uni.showModal({
          title: '提示',
          content: '确定要放弃发布吗？已输入的内容将不会保存',
          cancelText: '继续编辑',
          confirmText: '放弃',
          success: (res) => {
            if (res.confirm) {
              uni.navigateBack();
            }
          }
        });
      } else {
        // 无内容直接返回
        uni.navigateBack();
      }
    }
  }
};
</script>

<style scoped lang="scss">
// 颜色变量
$primary: #165DFF;
$primary-light: #E8F3FF;
$danger: #FF4D4F;
$text-primary: #1D2129;
$text-secondary: #4E5969;
$text-tertiary: #86909C;
$bg-light: #F5F7FA;
$bg-white: #FFFFFF;
$border-light: #E5E6EB;
$shadow-light: 0 2px 10px rgba(0, 0, 0, 0.05);

.publish-topic-page {
  background-color: $bg-light;
  min-height: 100vh;
  padding-top: var(--status-bar-height);
}

// 导航栏
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  padding: 0 16px;
  background-color: $bg-white;
  border-bottom: 1px solid $border-light;
  
  .cancel-btn, .publish-btn {
    width: 60px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
  }
  
  .cancel-btn {
    color: $text-secondary;
  }
  
  .publish-btn {
    color: $primary;
    font-weight: 500;
    
    &:disabled {
      color: $text-tertiary;
      opacity: 0.6;
    }
  }
  
  .nav-title {
    font-size: 18px;
    font-weight: 600;
    color: $text-primary;
  }
}

// 发布表单
.publish-form {
  padding: 16px;
  
  .form-item {
    margin-bottom: 20px;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .item-label {
      display: block;
      font-size: 15px;
      font-weight: 500;
      color: $text-primary;
      margin-bottom: 10px;
    }
    
    .topic-input {
      width: 100%;
      padding: 12px;
      background-color: $bg-white;
      border: 1px solid $border-light;
      border-radius: 8px;
      font-size: 14px;
      color: $text-primary;
      resize: none;
      box-sizing: border-box;
      
      &::placeholder {
        color: $text-tertiary;
      }
    }
    
    .title-input {
      height: 50px;
      margin-bottom: 6px;
    }
    
    .content-input {
      height: 180px;
      margin-bottom: 6px;
    }
    
    .input-counter {
      display: block;
      text-align: right;
      font-size: 12px;
      color: $text-tertiary;
    }
  }
  
  // 分类选择器
  .category-selector {
    .category-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 16px;
      background-color: $bg-white;
      border: 1px solid $border-light;
      border-radius: 8px;
      font-size: 14px;
      
      .selected-category {
        color: $text-primary;
      }
    }
  }
  
  // 图片上传
  .image-uploader {
    .upload-container {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    
    .image-preview {
      position: relative;
      width: 80px;
      height: 80px;
      border-radius: 8px;
      overflow: hidden;
      
      .preview-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      
      .delete-image {
        position: absolute;
        top: -6px;
        right: -6px;
        width: 24px;
        height: 24px;
        background-color: $danger;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    
    .upload-btn {
      width: 80px;
      height: 80px;
      background-color: $bg-white;
      border: 1px dashed $border-light;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .image-count {
      position: absolute;
      bottom: 4px;
      right: 4px;
      background-color: rgba(0, 0, 0, 0.6);
      color: white;
      font-size: 12px;
      padding: 1px 6px;
      border-radius: 10px;
    }
  }
  
  // 话题标签
  .tags-container {
    .tags-content {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      min-height: 36px;
      padding: 6px;
      background-color: $bg-white;
      border: 1px solid $border-light;
      border-radius: 8px;
      margin-bottom: 8px;
    }
    
    .tag-item {
      display: flex;
      align-items: center;
      background-color: $primary-light;
      color: $primary;
      padding: 4px 10px;
      border-radius: 16px;
      font-size: 13px;
      
      .tag-close {
        margin-left: 6px;
        color: $primary;
        opacity: 0.8;
      }
    }
    
    .add-tag-input {
      flex: 1;
      min-width: 100px;
      height: 26px;
      font-size: 13px;
      color: $text-primary;
      background: transparent;
      border: none;
      outline: none;
      
      &::placeholder {
        color: $text-tertiary;
      }
    }
    
    .tags-hint {
      display: block;
      font-size: 12px;
      color: $text-tertiary;
      line-height: 1.5;
    }
  }
}

// 分类选择器弹窗
.category-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  
  .modal-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    animation: fadeIn 0.3s;
  }
  
  .modal-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: $bg-white;
    border-radius: 16px 16px 0 0;
    max-height: 70vh;
    overflow-y: auto;
    animation: slideUp 0.3s;
  }
  
  .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid $border-light;
    
    .modal-title {
      font-size: 18px;
      font-weight: 600;
      color: $text-primary;
    }
    
    .modal-close {
      color: $text-tertiary;
    }
  }
  
  .category-list {
    padding: 10px 0;
    
    .category-option {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 16px;
      font-size: 16px;
      color: $text-primary;
      
      &:active {
        background-color: $bg-light;
      }
      
      .option-check {
        color: $primary;
      }
    }
  }
}

// 发布成功提示
.success-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  animation: fadeIn 0.3s, fadeOut 0.3s 1.2s;
  
  .toast-text {
    margin-top: 12px;
    font-size: 16px;
    color: $text-primary;
    font-weight: 500;
  }
}

// 动画效果
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
</style>
    